<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS绝对定位</title>
</head>
<style>
    /*
    给元索设置position: absolute 即可实现绝对定位。
    可以使用left、 right、 top、 bottom四个属性调整位置。

    绝对定位参考哪里:
    参考包含块:
    1.对于没有脱离文档流的元素:包含块就是父元素;
    2.对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元索 (如果所有祖先都没定位，那包含块就是整个页面)

    特点:当行内元素设置了绝对定位之后,可以通过width和height设置宽高,而相对定位没有这个特点
    绝对定位和浮动不能同时设置,如果同时设置,浮动失效
    */
    * {
        margin: 0;
        padding: 0;
    }

    .outer {
        margin: 100px;
        width: 200px;
        height: 200px;
        background-color: pink;
        position: relative;
        /*    子绝父相*/
        overflow: auto;
    }

    .inner {
        width: 100px;
        height: 100px;
        background-color: red;
        text-align: center;
        line-height: 80px;
        font-size: 14px;

        /*绝对定位:绝对定位使元素的位置与文档流无关，因此不占据空间
        他的top和left的值不想相对元素一样,相对与原本的位置进行移动
        绝对定位的top和left是对应他的参考块左上角来定位
        */
        position: absolute; /*如果开了绝对定位之后不设置值,那么他就会在原本的位置漂浮起来,只设置左右,他就会保持原来的高低*/
        top: 30px;
        left: 10px;

    }

    .test {
        width: 100px;
        height: 100px;
        background-color: green;
        text-align: center;
        line-height: 80px;
        font-size: 14px;

    }

    .test2 {
        width: 100px;
        height: 100px;
        background-color: gray;
        text-align: center;
        line-height: 80px;
        font-size: 14px;

    }
</style>
<body>
<div class="outer">
    <div class="test">1</div>

    <div class="inner">参考包含块</div>
    <div class="test2">2</div>
</div>
</body>
</html>